import React,{useState,useEffect,useRef} from 'react'
import './index.css'
import dingwei from '../../image/dingwei_nor.png'
import dingwei_hov from '../../image/dingwei_hov.png'
import fenxi from '../../image/fenxi_nor.png'
import fenxi_hov from '../../image/fenxi_hov.png'
import huaxiang from '../../image/huaxiang_nor.png'
import huaxiang_hov from '../../image/huaxiang_hov.png'
import jiankong from '../../image/jiankong_nor.png'
import jiankong_hov from '../../image/jiankong_hov.png'
import tingche from '../../image/tingche_nor.png'
import tingche_hov from '../../image/tingche_hov.png'
import toukui from '../../image/toukui_nor.png'
import toukui_hov from '../../image/toukui_hov.png'

function Carouse() {
  //数据
  const [data,setData]=useState([
    {
      id:1,
      url:dingwei,
      url_hov:dingwei_hov,
      text:'车辆定位系统',
      active:false
    },
    {
      id:2,
      url:fenxi,
      url_hov:fenxi_hov,
      text:'可视化作战平台',
      active:false
    },
    {
      id:3,
      url:huaxiang,
      url_hov:huaxiang_hov,
      text:'交通安全画像系统',
      active:false
    },
    {
      id:4,
      url:jiankong,
      url_hov:jiankong_hov,
      text:'交通态势监控系统',
      active:false
    },
    {
      id:5,
      url:tingche,
      url_hov:tingche_hov,
      text:'自动停车系统',
      active:false
    },
    {
      id:6,
      url:toukui,
      url_hov:toukui_hov,
      text:'未带头盔识别系统',
      active:false
    }
  ])
  const reflist=useRef(null)
  // /点击事件
  const dj=(id)=>{
    let newData = data.find(item=>item.id===id);
    alert(newData.text)
  }
  //模拟周期
  useEffect(()=>{
    //循环
    console.log('reflist',reflist)
    for(let a=0;a<reflist.current.children.length;a++){
      reflist.current.children[a].style['animation-delay']=`${-5-a*3.3}s,${-a*3.3}s,${-a*3.3}s`
    }
  },[])
  //划入停止
  const enter=(id)=>{
    for(let a=0;a<reflist.current.children.length;a++){
      reflist.current.children[a].style['animation-play-state']=`paused`
    }
    let newData = data.find(item=>item.id===id);
    newData.active=!newData.active;
    setData([...data])
  }

  //划出继续
  const leave=(id)=>{
    for(let a=0;a<reflist.current.children.length;a++){
      reflist.current.children[a].style['animation-play-state']=`running`
    }
    let newData = data.find(item=>item.id===id);
    newData.active=!newData.active;
    setData([...data])
  }

  return (
    <div className='carouse' ref={reflist}>
      {
        data.map((item)=>{
          return (
            <div className='imgW' key={item.id} onClick={()=>dj(item.id)} onMouseEnter={(e)=>enter(item.id)} onMouseLeave={(e)=>leave(item.id)} >
              <img src={item.active?item.url_hov:item.url}></img>
              <p>{item.text}</p>
            </div>
          )
        })
      }
    </div>
  )
}

export default Carouse
